import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
} from 'react-native';

import TImage from '../../components/TImage';
import BasePage from '../common/BasePage';
import BaseItem from '../common/BaseItem';
import CommonDataListView from '../common/CommonDataListView';
import SizeUtils from '../../common/SizeUtils';
import {DateUtils} from '../../utils/Utils';
import Config from '../../config';
import HeartLoveRequestQuestionListAction from '../../actions/heart/HeartLoveRequestQuestionListAction';

export default class HeartLoveQuestionPage extends BasePage {
  constructor(props) {
    super(props);
  }

  render() {
    return(
      <View style={{paddingTop:Config.paddingTop}}>
        <CommonDataListView style={{width:SizeUtils.getWindowSize().width,
            height:SizeUtils.getWindowSize().height - Config.paddingTop - SizeUtils.translateDesignHeightToCode(30),
            }}
          onRenderItem={this._onRenderItem.bind(this)} requestData={this._requestData.bind(this)}
          onPressItem={this._onPressItem.bind(this)}
        />
        {this._renderNavigationBar()}
      </View>
    )
  }

  _onPressItem(data) {
    this.gotoPage(Config.pages.heart_love_question_content, {questionData:data});
  }

  _onRenderItem(data, index) {
    return <Item data={data} />
  }

  _requestData(page, listView) {
    new HeartLoveRequestQuestionListAction().call(listView, {page:page});
  }

  _renderNavigationBarRightButtonContent() {
    return (
      <Text style={{
        width:SizeUtils.translateDesignWidthToCode(200 - 40),
        textAlign:'right', color:"#db3132",
        fontSize:SizeUtils.translateFontSizeToCode(34), fontFamily:'STHeitiSC-Medium',}}>
        提问
      </Text>
    )
  }

  _onPressNavigationBarRightBtn() {
    this.gotoPage(Config.pages.heart_love_question_ask);
  }
}

export class Item extends BaseItem {
  constructor(props) {
    super(props);

  }

  render() {
    return(
      <View style={{width:SizeUtils.getWindowSize().width,
          flexDirection:"column", borderBottomWidth:SizeUtils.translateDesignNumToCode(3),
            borderColor:"#eeeeee"}}>
        <View style={{paddingLeft:SizeUtils.translateDesignWidthToCode(40),
          paddingRight:SizeUtils.translateDesignWidthToCode(40), flexDirection:"column"}}>
          {this._renderTop()}
          {this._renderContent()}
          {this._renderBottom()}
        </View>
        {this._renderProfesser()}
      </View>
    )
  }

  _renderTop() {
    return (
      <View style={{flexDirection:"row", alignItems:"center", paddingTop:SizeUtils.translateDesignHeightToCode(32),
          }}>
        <TImage source={{uri:this.props.data.by_avatar}} style={{width:28, height:28}}/>
        <Text style={{color:"#999999", fontSize:SizeUtils.translateFontSizeToCode(30),
            paddingLeft:SizeUtils.translateDesignWidthToCode(20)}}>
          {this.props.data.by_name}
        </Text>
        <Text style={{color:"#999999", fontSize:SizeUtils.translateFontSizeToCode(24),
            paddingLeft:SizeUtils.translateDesignWidthToCode(22)}}>
          {DateUtils.formatDate2(this.props.data.created_at)}
        </Text>
      </View>
    )
  }

  _renderContent() {
    return (
      <View style={{paddingTop:SizeUtils.translateDesignHeightToCode(24)}}>
        <Text style={{fontSize:SizeUtils.translateFontSizeToCode(32),
            color:"#333333", fontWeight:"bold"}} numberOfLines={5}>
          {this.props.data.content}
        </Text>
      </View>
    )
  }

  _renderBottom() {
    let num = this.props.data.msgs.love_msgs === undefined ? 0 : this.props.data.msgs.love_msgs.length;
    let label = "";
    if(num === 0) {
      label = "暂无回答";
    }
    else {
      label = num + "个回答";
    }
    return (
      <View style={{flexDirection:"row", justifyContent:"flex-end", paddingTop:SizeUtils.translateDesignHeightToCode(40),
          paddingBottom:SizeUtils.translateDesignHeightToCode(28)}}>
        <Text style={{fontSize:SizeUtils.translateFontSizeToCode(24), color:"#333333"}}>
          {label}
        </Text>
      </View>
    )
  }

  _renderProfesser() {
    if(this.props.data.replier_id == undefined || this.props.data.replier_id == "") {
      return;
    }
    return (
      <View style={{paddingBottom:SizeUtils.translateDesignHeightToCode(40),
            paddingLeft:SizeUtils.translateDesignWidthToCode(40),
            paddingRight:SizeUtils.translateDesignWidthToCode(40),
            paddingTop:SizeUtils.translateDesignHeightToCode(30),
            borderTopWidth:SizeUtils.translateDesignNumToCode(3),
            borderColor:"#eeeeee",
            flexDirection:"column",
            backgroundColor:"#f9f9f9"}}>
        <Text style={{fontSize:SizeUtils.translateFontSizeToCode(30), color:"#333333"}}>
          {"专家 " + this.props.data.replier_name + " 回答:"}
        </Text>
        <Text style={{fontSize:SizeUtils.translateFontSizeToCode(32), color:"#333333", fontWeight:"bold",
            paddingTop:SizeUtils.translateDesignHeightToCode(34), }} numberOfLines={3}>
          {this.props.data.reply}
        </Text>
      </View>
    )
  }
}
